<template>
	<view>
		<view class="pore" style="z-index: 999;">
			<u-navbar title="开锁" bgColor="transparent" autoBack>
			</u-navbar>
		</view>
		<view class="uni-margin-wrap pore">
			<image :src="api_host + ban.imageUrl" mode="widthFix" class="width100"></image>
			<view class="ban-logo">
				<view class="c343 f46 italic-text bold">{{ban.title}}</view>
				<view class="c343 f28">{{ban.synopsis}}</view>
			</view>
		</view>
		<view class="ml30 mr30 list-box">
			<goods-list :dataArray="goodsList" @itemClick="getItem"></goods-list>
		</view>
		<!-- //类型 -->
		<u-popup v-if="show_sku" :show="show_sku" @close="skuClose" closeable @open="show_sku = true" round="20" bgColor="#FEF4E8">
			<view class="p30">
				<u-gap height="30"></u-gap>
				<lock-sku :curInfo="curInfo" :skuList="skuList" @close="skuClose"></lock-sku>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import goodsList from '@/components/lockList/index.vue'
	import lockSku from './sku.vue'
	import {getLocklist,getLocksku} from '@/common/api_housekeeping.js'
	import {getBanners} from '@/common/api_user.js'
	export default {
		components:{
			goodsList,
			lockSku
		},
		name:'',
		data() {
			return {
				id:'',
				ban:{},
				show_sku:false,
				goodsList: [],
				skuList:[],
				curInfo:{}
			}
		},
		onLoad(option) {
			this.id = option.id || ''
			this.getBanners()
			this.getLocklist()
		},
		methods: {
			async getBanners(){
				uni.showLoading({
					mask:true
				})	
				const res = await getBanners({
					affiliation:'3'
				})
				if(res.code == 200){
					this.ban = res.data[0]
				}
				uni.hideLoading()
			},
			async getLocklist(){
				uni.showLoading({
					mask:true
				})	
				const res = await getLocklist()
				if(res.code == 200){
					this.goodsList = res.data
					if(this.id){
						this.curInfo = this.goodsList.find(item => item.id == this.id)
						this.getLocksku()
					}
				}
				uni.hideLoading()
			},
			skuClose(){
				this.curInfo = {}
				this.skuList = []
				this.show_sku = false
			},
			getItem(item){
				this.curInfo = item
				this.getLocksku()
			},
			async getLocksku(){
				uni.showLoading({
					mask:true
				})	
				const res = await getLocksku({
					id:this.curInfo.id
				})
				if(res.code == 200){
					this.skuList = res.data
					this.show_sku = true
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
	.ban-logo{
		position: absolute;
		top: 40%;
		left:50rpx;
	}
	.list-box{
		position: relative;
		z-index: 999;
		margin-top: -80rpx;
	}
</style>
